---
title: Context Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
---

import { CommandTabs } from "@docs/components/command-tabs";
import { ExternalLinks } from "@docs/components/external-links";
import { PortalInfoAlert } from '@docs/components/portal-info-alert';
import { PreviewCard } from "@docs/components/preview-card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@docs/components/ui/tabs";
import { ContextMenuPreview } from "@docs/components/examples";
import { Step, Steps } from 'fumadocs-ui/components/steps';

<ExternalLinks
  links={[
    { title: 'Docs', url: 'https://rnprimitives.com/context-menu/' },
    { title: 'API Reference', url: 'https://rnprimitives.com/context-menu/#props' },
  ]}
/>

<div className="h-5"/>

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <div id="preview" className='*:hidden scroll-m-20' aria-hidden>
      ## Preview
    </div>
    <PreviewCard preview={<ContextMenuPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/context-menu.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>


## Installation

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger id="cli" value="cli">CLI</TabsTrigger>
    <TabsTrigger id="manual" value="manual">Manual</TabsTrigger>
  </TabsList>
  <TabsContent value="cli">
     <CommandTabs args={["add", "context-menu"]}/>
  </TabsContent>
  <TabsContent value="manual">
    <Steps> 
      <Step>
 
        **Install the following dependency:**

        ```
        npx expo install @rn-primitives/context-menu
        ```

      </Step>
      <Step>
 
        **Copy and paste the following code into your project.**

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/text.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/text.tsx\""
          }
        }
        ```

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/icon.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/icon.tsx\""
          }
        }
        ```

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/context-menu.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/context-menu.tsx\""
          }
        }
        ```

      </Step>
      <Step>

        **Update the import paths to match your project setup.**

      </Step>
    </Steps>

  </TabsContent>
</Tabs>

### Usage

<PortalInfoAlert />

```tsx
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from '@/components/ui/context-menu';
import { Text } from '@/components/ui/text';

```

```tsx
<ContextMenu>
  <ContextMenuTrigger>
    <Text>Right click</Text>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      <Text>Profile</Text>
    </ContextMenuItem>
    <ContextMenuItem>
      <Text>Billing</Text>
    </ContextMenuItem>
    <ContextMenuItem>
      <Text>Team</Text>
    </ContextMenuItem>
    <ContextMenuItem>
      <Text>Subscription</Text>
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```